<template>
  <div class="Operation">
    <div 
      :class="item" 
      v-for="item in actions" 
      :key="item"
      @click.stop.self="actionFun(item)">
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class Operation extends Vue {
  @Prop({ default: 'back,next,delete,save,close' }) actionParams: string | undefined

  actions: string[] | undefined = []

  created () {
    this.actions = this.actionParams?.split(',')
  }

  actionFun (item: string) {
    this.$emit(item)
  }
}
</script>

<style lang="scss" scoped>
.Operation {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  background-color: #fff;
  > div {
    width: 32px;
    height: 32px;
    margin: 0 10px;
    cursor: pointer;
  }
  .back {
    background: url('../assets/back.png') no-repeat;
    background-size: 100% 100%;
  }
  .next {
    background: url('../assets/next.png') no-repeat;
    background-size: 100% 100%;
  }
  .preview {
    background: url('../assets/preview.png') no-repeat;
    background-size: 100% 100%;
  }
  .save {
    background: url('../assets/save.png') no-repeat;
    background-size: 100% 100%;
  }
  .delete {
    background: url('../assets/delete.png') no-repeat;
    background-size: 100% 100%;
  }
  .close {
    background: url('../assets/close.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>